<template>
  <a-modal class="common-modal add-prod-modal" :title="$t('common.filterConfig')" :footer="null" :width="760" :visible="visible" @cancel="handleCancel" :maskClosable="false" style="top:5%;">
    <a-spin :spinning="false">
      <div class="common-modal-content">
        <a-row class="pr-20">
          <a-col :span="12" class="p-12 border-right-base pt-0">
            <a-input v-model:value="searchValue" class="mb-12" @change="onSearch" :placeholder="$t('common.pleaseInputSelectContents')">
              <template #prefix>
                <SearchOutlined />
              </template>
            </a-input>
            <a-tree v-model:checkedKeys="checkedKeys" :selectable="false" default-expand-all checkable @check="checkTree" :height="500" :tree-data="treeData">
              <template v-slot="slot">
                <span style="color: #1890ff">{{ slot }}</span>
              </template>
            </a-tree>
          </a-col>
          <a-col :span="12" class="p-12  pt-0">
            {{$t('common.selected')}} {{selectNodeList.length}} {{ $t('common.item') }}
            <article>
              <a-tag v-for="item in selectNodeList" :closable="!item.disabled" :key="item.key" @close="closeTag(item)" class="ft-size14">{{item.title}}</a-tag>
            </article>
          </a-col>
        </a-row>

      </div>
      <div class="common-modal-footer">
        <a-button @click="handleCancel" class="cancel">{{$t('common.cancel')}}</a-button>
        <a-button @click="handleOk" type="primary" class="confirm">{{$t('common.ok')}}</a-button>
      </div>
    </a-spin>
  </a-modal>
</template>

<script setup>
import { nextTick, ref } from 'vue'
import { SearchOutlined } from '@ant-design/icons-vue'
import { cloneDeep } from "lodash"
import i18n from '@/locales/index' 
const { t } = i18n.global
const emits = defineEmits(['ok'])
let visible = ref(false)
let selectNodeList = ref([])
let searchValue = ref()
let checkedKeys = ref([])
let originTreeData = ref([]) // 原数据
let treeData = ref([]) // 搜索之后的数据
const open = async (searchList) => {
  initModalData(searchList)
  visible.value = true
  await nextTick()
}
const initModalData = (searchList) => {
  searchValue.value = ''
  originTreeData.value = cloneDeep(searchList)
  treeData.value = [{
    title: t('common.allSelect'), key: 'checkAll', children: [...originTreeData.value]
  }]
  selectNodeList.value = searchList.filter(i => i.show)
  checkedKeys.value = selectNodeList.value.map(i => i.key)
  onSearch()
}
const onSearch = () => {
  treeData.value.forEach(item => {
    item.style = { display: searchValue.value ? 'none' : 'flex' }
    item.children.forEach(el => {
      el.style = {
        display: el.title.indexOf(searchValue.value) > -1 ? 'flex' : 'none'
      }
    })
  })
}
const checkTree = (checkedKeys, { checkedNodes }) => {
  selectNodeList.value = checkedNodes.filter(i => !i.children)
}
const closeTag = (tag) => {
  let selectTags = selectNodeList.value.filter(i => i.key != tag.key)
  selectNodeList.value = selectTags
  checkedKeys.value = selectTags.map(i => i.key)
}
const handleOk = async () => {
  handleCancel()
  emits('ok', checkedKeys.value)
}
const handleCancel = () => {
  visible.value = false
}
defineExpose({
  open
})
</script>
